<template>
  <div style="min-height: 100%; background-color: rgb(244, 240, 248);; overflow: auto">
    <div class="design-head">
      <el-tag style="position: absolute; top: 20px; left: 110px">当前问卷</el-tag>
      <el-select
        v-model="value"
        placeholder="无问卷"
        style="float: left; margin-left: 200px; margin-top: 15px" 
        slot="append"   
      >
        <el-option
          v-for="(item, index) in options"
          :key="item.id"
          :label="item.title"
          :value="item.id"
          @click.native="getCurrent(item, index)"
        >
        </el-option>
      </el-select>

      <el-button
        type="success"
        v-show="!questionnaire.open && questionnaire.publish_time != null"
        @click="handleSwitch"
        class="button"
      >
        <i class="el-icon-video-play"></i> 开始回收</el-button
      >
      <el-button
        type="success"
        v-show="!questionnaire.open && questionnaire.publish_time == null"
        @click="handleSwitch"
        class="button"
      >
        <i class="el-icon-video-play"></i> 发布</el-button
      >
      <el-button
        type="warning"
        v-show="questionnaire.open"
        @click="handleSwitch"
        class="button"
      >
        <i class="el-icon-video-pause"></i> 暂停回收</el-button
      >

      <el-menu
        :default-active="activeIndex"
        class="el-menu-demo"
        mode="horizontal"
      >
        <el-submenu index="1">
          <template slot="title">问卷设计</template>
          <el-menu-item index="1-0" @click="GoToGuide">设计向导</el-menu-item>
          <el-menu-item index="1-1" @click="GoToEdit">编辑问卷</el-menu-item>
          <el-menu-item index="1-2" @click="GoToSet">设置</el-menu-item>
          <el-menu-item index="1-3" @click="GoToPreview">预览</el-menu-item>
        </el-submenu>
        <el-menu-item index="2" @click="GoToSend">发布管理</el-menu-item>

        <el-menu-item index="3" @click="GoToAnalysis">数据统计</el-menu-item>

        <el-menu-item index="4" @click="back">返回列表</el-menu-item>
      </el-menu>

      <div style="position: absolute; top: 15px; right: 40px">
        <el-avatar
          src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
        ></el-avatar>
      </div>
    </div>
    <div class="design-main">
      <router-view :questionnaire="questionnaire" :index="index"></router-view>
    </div>
  </div>
</template>

<script>
// eslint-disable-next-line no-unused-vars
import { getQuestionnaireMsg, questionnaireSwitch } from "../../api";
export default {
  data() {
    return {
      uid:'',
      value:'',
      label:'',
      questionnaire:{},
      index:0,
      encode_qid:'',
      encode_index:'',
      options:[],
      activeIndex:"",
      type:""
    };
  },
 
  async mounted() {
    this.uid=this.$store.state.uid;
    const result=await getQuestionnaireMsg(this.uid);
    this.options=result.elemList;
  
    if (this.$route.query.index == null) {
      if (this.options.length > 0) {
        this.getCurrent(this.options[0], 0);
      } else {
        this.$message({
          message: '当前用户无问卷，请先创建问卷',
          type: 'warning'
        })
        this.$router.push('/manage');
      }
    } else {
      this.getCurrent(this.options[JSON.parse(this.$UrlEncode.decode(this.$route.query.index))/1234], JSON.parse(this.$UrlEncode.decode(this.$route.query.index))/1234);
    }
    this.value=this.questionnaire.title;
    this.type=this.questionnaire.type;
  },
  methods: {
    GoToGuide() {
      this.$router.push("/design/guide");
    },
    GoToSet() {
      this.$router.push("/design/set");
    },
    GoToSend() {
      this.$router.push("/design/send");
    },
    GoToAnalysis() {
      this.$router.push('/design/analysis');
    },
    GoToPreview(){
      this.$router.push({path: '/preview', query: {questionnaireId: this.encode_qid, index: this.encode_index}})
    },
    GoToEdit() {
      if(this.type=='E'){
        this.$router.push({path: '/examquestionnare', query: {questionnaireId: this.encode_qid, index: this.encode_index}})
      }
      else if(this.type=='N'){
        this.$router.push({path: '/normalquestionnare', query: {questionnaireId: this.encode_qid, index: this.encode_index}})
      }
      else if(this.type=='V'){
        this.$router.push({path: '/votequestionnare', query: {questionnaireId: this.encode_qid, index: this.encode_index}})
      }
      else if(this.type=='Y'){
        this.$router.push({path: '/yiqingquestionnare', query: {questionnaireId: this.encode_qid, index: this.encode_index}})
      }
      else if(this.type=='A'){
        this.$router.push({path: '/applyquestionnare', query: {questionnaireId: this.encode_qid, index: this.encode_index}})
      }
      
    },
    getCurrent(item, index) {
      this.questionnaire = item;
      this.index = index;
      this.encode_qid = this.$UrlEncode.encode(JSON.stringify(item.id * 1234));
      this.encode_index = this.$UrlEncode.encode(JSON.stringify(index * 1234));
    },
    handleSwitch() {
      let open = '';
      let questionnaire = this.questionnaire;
			if (questionnaire.open == false) {
        open = 'true';
        questionnaire.open = true;
        if (questionnaire.publish_time == null) {
          questionnaire.publish_time = ' ';
        }
			} else {
				open = 'false';
        questionnaire.open = false;
			}
			questionnaireSwitch(this.uid, questionnaire.id, open).then(res => {
				const x = res.error_code;
				switch (x){
					case -1:alert("未知错误");break;
					case 0:
						this.$message({
							message: '操作成功',
							type: 'success',
              duration: 1000
						});
						break;
					case 1:alert("请求参数错误");break;
					case 2:alert("用户不存在");break;
					case 3:alert("问卷不存在");break;
				}
			})
    },
    back() {
      this.$router.push('/manage');
    }
  }
};
</script>
<style scoped>

.design-head {
  background-color: white;
  height: 69px;
  width: 100%;
}
.el-menu-demo {
  margin-left: 900px;
  padding-top: 8px;
}
.design-main {
  height: 90%;
  width: 60%;
  background-color: #fff;
  margin: 0 auto;
  margin-top: 10px;
}
.design-left {
  width: 13%;
}
.button {
  top: 18px;
  float: left;
  margin-left: 10px;
  margin-top: 15px;
}
</style>